.banner {
  box-shadow: 0 0 0 9999px #fff;
  width: 800px;
  height: 800px;

  &-img {
    transform: rotateY(180deg);
  }

  &-logo {
    position: relative;
    width: 100%;
    z-index: 10;
  }
}

.descRef1 {
  color: rgba(0, 0, 0, 50%);
}

.last-img {
  background-image: url('/last.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom center;
}

// .mask-list {
//   background: repeating-linear-gradient(
//     to right,
//     rgba(68, 197, 228, 24%),
//     rgba(68, 197, 228, 20%) 1px,
//     rgba(148, 232, 253, 15%) 5%,
//     rgba(68, 197, 228, 20%) 10%
//   );
//   backdrop-filter: blur(35px);
// }

.item {
  // width: calc(4.52% + 0px);
  // position: absolute;
  // top: 0;
  flex: 1;
  height: 100%;
  background: rgba(148, 232, 253, 15%);
  box-shadow: 0 10px 70px 0 rgba(68, 197, 228, 20%) inset;
  backdrop-filter: blur(35px);
  opacity: 0;
  overflow: hidden;
}

.second {
  position: sticky;
  top: 60px;
}

.banner1 {
  transform: translateY(-764px);
}

.banner2 {
  transform: translateY(-1528px);
}

.button {
  background-color: #fff;
  margin-top: 44px;
  border: 0.737px solid #44c5e4;
  color: #44c5e4;
  width: 230px;
  height: 56px;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  cursor: pointer;
  overflow: hidden;
}

.button-bg {
  position: absolute;
  left: -230px;
  top: 0;
  width: 230px;
  height: 56px;
  border-radius: 28px;
  background-color: #44c5e4;
  transition: all 0.2s;
  z-index: 10;
}

.button-arrow {
  display: block;
}

.button-arrow1 {
  display: none;
}

.rtl-img {
  transform: rotateY(180deg);
}

.button:hover {
  color: #fff;
}

.button:hover .button-bg {
  left: 0;
}

.button:hover .button-arrow {
  display: none;
}

.button:hover .button-arrow1 {
  display: block;
}

.mouse {
  writing-mode: vertical-rl;

  /* text-orientation: upright; */
  transform: rotate(180deg);
  padding: 10px 0;
}

.mousey {
  width: 3px;
  padding: 2px 9px;
  height: 35px;
  border: 2px solid #7d8282;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
  cursor: pointer;

  .scroller {
    width: 3px;
    height: 10px;
    border-radius: 25px;
    background-color: #7d8282;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(0.14, 0.41, 0.69, 0.94);
    animation-iteration-count: infinite;
  }
}

@keyframes scroll {
  0% {
    opacity: 0;
  }

  10% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}
